/*
 * @Description: 好友申请详情页
 * @Author: Yong
 * @Date: 2021-10-09 14:52:36
 * @LastEditTime: 2021-10-10 17:20:50
 */
import React from 'react'
import { RouteComponentProps } from 'react-router-dom'
import { List, Image, Button, Space } from 'antd-mobile'
import H from 'history'
import styles from './index.module.scss'
import { FriendsService } from '@apis/Friends'
const userPhoto = require('@assets/images/defaultPhoto.jpg')


interface Location extends H.Location {
    query: {[key:string]:string}
}

interface IProps extends RouteComponentProps {
    location: Location
}

interface applyFriendListItem {
    avatar?: string
    id?: string
    lastTime?: string
    msgCon?: string
    nickName?: string
}

interface IStates {
    applyFriendList:  Array<applyFriendListItem>
    userInfo: { [key: string]: string }
}

export default class FriendApplication extends React.Component<IProps, IStates> {
    
    state: IStates = {
        userInfo: JSON.parse(window.localStorage.getItem('userInfo')),
        applyFriendList: []
    }

    componentDidMount () {
        this.getApplyFriendsList()
    }

    // 获取申请好友列表
    async getApplyFriendsList () {
        const { data: { data: applyFriendList } } = await FriendsService.getApplyFriendsList(this.state.userInfo.ID)
        this.setState({
            applyFriendList: applyFriendList
        })
    }

    // 拒绝好友申请
    refuseFriend = async (id: string) => {
        const userID = this.state.userInfo.ID
        const friendID = id
        await FriendsService.refuseFriend(userID, friendID)
        // 重新获取列表数据
        this.getApplyFriendsList()
    }

    // 同意好友申请 - 跳转进入聊天页面
    agreeFriend = async (item: applyFriendListItem) => {
        const userID = this.state.userInfo.ID
        const friendID = item.id
        // 修改好友状态为 0(好友)
        await FriendsService.agreeFriend(userID, friendID)
        // 跳转进入聊天页面
        this.props.history.push({ pathname: '/chatRoom', state: { friendInfo: item } })
    }

    render () {
        const { applyFriendList } = this.state
        return (
            <div className={styles.FriendApplication}>
                {/* 顶部 */}
                <div className={styles.top}>
                    好友申请详情页
                </div>
                {/* 好友申请列表 */}、
                <div className={styles.applyFriendList} >
                    <h5>好友申请列表</h5>
                    <List>
                        {applyFriendList.map((item, index) => (
                            <List.Item
                                key={index}
                                extra={
                                    <Space>
                                        <Button onClick={() => { this.refuseFriend(item.id) }}>拒绝</Button>
                                        <Button onClick={() => { this.agreeFriend(item) }}>同意</Button>
                                    </Space>
                                }
                                prefix={<Image src={userPhoto} style={{ borderRadius: 20 }} fit='cover' width={40} height={40} />}
                                description={`备注：${item.msgCon}`}
                            >
                                {item.nickName}
                            </List.Item>
                        ))}
                    </List>
                </div>
            </div>
        )
    }

}